<template>
    <div>

   
   <el-form>
    <el-form-item label="SKU名称" >
        <el-input placeholder="请你输入SKU的名称" v-model="SkuSaveParams.skuName"></el-input>

    </el-form-item>
    <el-form-item label="价格(元)">
        <el-input placeholder="请你输入SKU的名称"  type="number" v-model="SkuSaveParams.price"></el-input>

    </el-form-item>
    <el-form-item label="重量(g)">
        <el-input placeholder="请你输入SKU的重量" type="number" v-model="SkuSaveParams.weight" ></el-input>

    </el-form-item>
    <el-form-item label="SKU描述">
        <el-input placeholder="请你输入SKU的描述" type="textarea" v-model="SkuSaveParams.skuDesc"></el-input>

    </el-form-item>
    <el-form-item  label="平台属性">
        <el-form :inline="true">
            <el-form-item :label="item.attrName" v-for="(item,index) in  platFormArr" :key="item.id">
                <el-select placeholder="请选择" v-model="item.AttrIdandValueId">
                  <el-option :label="val.valueName" :value="`${item.id}:${val.id}`" v-for="(val,index) in item.attrValueList" :key="val.id"></el-option>
                </el-select>
            </el-form-item>
         
       

        </el-form>

    </el-form-item>
    <el-form-item label="销售属性">
        <el-form :inline="true">

            <el-form-item :label="item.saleAttrName" v-for=" (item,index) in saleArr" :key="item.id">
                <el-select placeholder="请选择" v-model="item.AttrIdAndValueId">
                    <el-option :label="val.saleAttrValueName" :value="`${item.id}:${val.id}`" v-for="(val,index) in item.spuSaleAttrValueList" :key="val.id"></el-option>
                  </el-select>
            </el-form-item>
 

        </el-form>

    </el-form-item>
    <el-form-item label="图片名称">
        <!-- table -->
        <el-table border  :data="imgArr" ref="table">
            <el-table-column  type="selection">
               
            </el-table-column>
            <el-table-column label="图片">
                <template #="{row,$index}">
                 <img :src="row.imgUrl" alt="" style="width:200px;height:100px">
                </template>

            </el-table-column>
            <el-table-column prop="imgName" label="名称" >

            </el-table-column>
            <el-table-column label="操作">
                <template #="{row,$index}">
                    <div>
                    <el-button type="primary"  v-if="row.default==1">默认图片</el-button>
                    <el-button type="warning" v-else  @click="changeSelect(row)">设置默认</el-button>
                    </div>
                </template>

            </el-table-column>
        </el-table>
        <el-button type="primary" style="margin:10px 5px" @click="save">保存</el-button>
        <el-button  @click="cancel">取消 </el-button>

    </el-form-item>
   </el-form>
   
</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { defineEmits,defineExpose, ref,nextTick } from 'vue';
import {reqSaleAttr,reqImgList,reqPlatForm,reqSaveSKu}  from '../../../../api/product/spu/index'

const emit= defineEmits(['skuCancel'])
const saleArr=ref<any>([])
const imgArr=ref<any>([])
const platFormArr=ref<any>([])
const table=ref()
const SkuSaveParams=ref<any>(
    {
  category3Id:"",//三级分类的ID
  spuId:"",//spu的ID
  tmId:"",//品牌的ID
  skuName:"",//sku的名字
  price:"",//价格
  weight: "",//重量
  skuDesc: "",//sku描述
  skuDefaultImg: '',//sku商品默认图片地址
  skuAttrValueList: [//收集平台属性的数据
    {
      attrId:"",//平台属性的ID
       valueId:"",//平台属性值的ID
    }
  ],
  skuSaleAttrValueList: [//销售属性的数据
    {
      saleAttrId:"",//销售属性的ID
      saleAttrValueId:'',//销售属性值的ID
    }
  ],

}
)


const  cancel=()=>{
    console.log(111);
    
      emit('skuCancel',0)
}
//初始化SKU数据 发送 3个请求 
const initSku=async(c1Id:number|string,c2Id:number|string,c3Id:number|string,row:any)=>{
    Object.assign(SkuSaveParams.value, {
  category3Id:"",//三级分类的ID
  spuId:"",//spu的ID
  tmId:"",//品牌的ID
  skuName:"",//sku的名字
  price:"",//价格
  weight: "",//重量
  skuDesc: "",//sku描述
  skuDefaultImg: '',//sku商品默认图片地址
  skuAttrValueList: [//收集平台属性的数据
    {
      attrId:"",//平台属性的ID
       valueId:"",//平台属性值的ID
    }
  ],
  skuSaleAttrValueList: [//销售属性的数据
    {
      saleAttrId:"",//销售属性的ID
      saleAttrValueId:'',//销售属性值的ID
    }
  ],

})
  saleArr.value=[]
  imgArr.value=[]
  platFormArr.arr=[]
    let result1=await  reqSaleAttr(row.id)
    let result2=await  reqImgList(row.id)
    // 获取平台属性 
    let result3=await  reqPlatForm(c1Id,c2Id,c3Id)
    saleArr.value=result1
    imgArr.value=result2
    platFormArr.value=result3
    // 三个Id收集 品牌tmId 三级分类Id c3Id  spuId
 
    
    SkuSaveParams.value.category3Id=c3Id
    SkuSaveParams.value.spuId=row.id
    SkuSaveParams.value.tmId=row.tmId


    if(imgArr.value.length>0){
         imgArr.value.forEach((item:any) => {
              item.default=0
            
         });
         imgArr.value[0].default=1
        SkuSaveParams.value.skuDefaultImg=imgArr.value[0].imgUrl

    }
  
    nextTick(()=>{
        table.value.toggleRowSelection(imgArr.value[0],true)

    })
    

    
    

}
// 当点击设置默认时候 触发表格的多选
const changeSelect=(row:any)=>{
    imgArr.value.forEach((item:any) => {
        item.default=0
        table.value.toggleRowSelection(item,false)
        
    });
    row.default=1

    SkuSaveParams.value.skuDefaultImg=row.imgUrl
    table.value.toggleRowSelection(row,true)
     

}
// 点击保存后的回调 整理参数发送请求
const save= async()=>{
// 整理平台属性参数
  const platArr=platFormArr.value.reduce((prev:any,next:any)=>{
         if(next.AttrIdandValueId){
          let [attrId,valueId]  =next.AttrIdandValueId.split(':')
            prev.push({
                attrId,
                valueId

            })
         }
        return prev
  },[])
  SkuSaveParams.value.skuAttrValueList=platArr
//  整理已有属性
  const hasArr=saleArr.value.reduce((prev:any,next:any)=>{
         if(next.AttrIdAndValueId){
          let [saleAttrId,saleAttrValueId]  =next.AttrIdAndValueId.split(':')
            prev.push({
                saleAttrId,
                saleAttrValueId

            })
         }
        return prev
  },[])
  SkuSaveParams.value.skuSaleAttrValueList=hasArr
// 整理完参数发送请求
try {
    await reqSaveSKu(SkuSaveParams.value)
    ElMessage({
        type:'success',
        message:'添加SKU成功'
    })
    emit('skuCancel',0)

} catch (error) {
    ElMessage({
        type:'error',
        message:'添加SKU失败'
    })
}
 

  


   
 
   
}
defineExpose({initSku})



</script>

<style scoped>

</style>